import React from 'react'
import { useSnapshot } from 'valtio'
import { yun } from '@/stores/customer'
import { useEffect } from 'react'
interface CustomerProps {
    list?: Array<{
        label: string
        value: string
        prence: string
    }>
}
const OrderList: React.FC<CustomerProps> = ({ list }) => {
    const store = useSnapshot(yun)
    useEffect(() => {
        store.getSearch()
    }, [])
    return (
        <div className="grid grid-cols-6 gap-40">
            {/* 有效订单 */}
            <div className="flex items-center justify-between px-4 py-2 border-b">
                <div>
                    <p className=" w-full truncate text-center">有效订单</p>
                    <p className="text-10 text-lightblue-5 font-600 w-full truncate text-center">
                        {store.resultOptions.validOrderNumber}
                    </p>
                    <p className=" w-full truncate text-center">
                        环比： {store.resultOptions.validOrderPercent}%
                    </p>
                </div>
            </div>
            {/* 实付总额 */}
            <div className="flex items-center justify-between px-4 py-2 border-b">
                <div>
                    <p className=" w-full truncate text-center">实付总额</p>
                    <p className="text-10 text-lightblue-5 font-600 w-full truncate text-center">
                        {store.resultOptions.TotalPaid}
                    </p>
                    <p className=" w-full truncate text-center">
                        环比：{store.resultOptions.PricePrecent}%
                    </p>
                </div>
            </div>
            {/* 销售订单数 */}
            <div className="flex items-center justify-between px-4 py-2 border-b">
                <div>
                    <p className=" w-full truncate text-center">销售订单数</p>
                    <p className="text-10 text-lightblue-5 font-600 w-full truncate text-center">
                        {store.resultOptions.SalesOrderNumber}
                    </p>
                    <p className=" w-full truncate text-center">环比：100%</p>
                </div>
            </div>
            {/* 人均消费额 */}
            <div className="flex items-center justify-between px-4 py-2 border-b">
                <div>
                    <p className=" w-full truncate text-center">人均消费额</p>
                    <p className="text-10 text-lightblue-5 font-600 w-full truncate text-center">
                        {store.resultOptions.PerCapitaConsumptionAmount}
                    </p>
                    <p className=" w-full truncate text-center">环比：10%</p>
                </div>
            </div>
            {/* 新客户 */}
            <div className="flex items-center justify-between px-4 py-2 border-b">
                <div>
                    <p className=" w-full truncate text-center">新客户</p>
                    <p className="text-10 text-lightblue-5 font-600 w-full truncate text-center">
                        {store.resultOptions.NewCustomer}
                    </p>
                    <p className=" w-full truncate text-center">环比：20%</p>
                </div>
            </div>
            {/* 老客户 */}
            <div className="flex items-center justify-between px-4 py-2 border-b">
                <div>
                    <p className=" w-full truncate text-center">老客户</p>
                    <p className="text-10 text-lightblue-5 font-600 w-full truncate text-center">
                        {store.resultOptions.patron}
                    </p>
                    <p className=" w-full truncate text-center">环比：10%</p>
                </div>
            </div>
        </div>
    )
}

export default OrderList
